<template>
	<el-dialog title="角色菜单分配" :visible.sync="visible" width="500px" :center="false" :before-close="handleClose">
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit" style="color: #FFF"></i>&nbsp;
			<span style="color: #FFF">角色菜单分配</span>
		</div>
		<div>
			<el-tree v-if="visible"
			size="mini"
			ref="menuList"
			:data="menuList"
			:props="defaultProps"
			show-checkbox
			node-key="name"
			:default-expand-all="expandAll" 
			:check-strictly="checkStrictly"
			:default-checked-keys="checkedKeys"
			@check-change="handleCheckChange"
			>		
			</el-tree>
		</div>
		<span slot="footer" class="dialog-footer">
			<!-- <el-button size="mini" type="primary" @click="onSubmit">确定</el-button>
			<el-button size="mini" @click="closeDialog">取消</el-button> -->
			
			<el-button type="primary" plain @click="onSubmit" size="mini">
				<i class="el-icon-check"></i>
				确定</el-button>
			<el-button @click="closeDialog" size="mini">
				<i class="el-icon-close"></i>
				取消</el-button>
		</span>
	</el-dialog>
</template>

<script>
	"use strict";
import { getMenuList} from '@/api/menu';
import { getMenuNameByRoleId, updateRoleMenu} from '@/api/roleMenu';
	export default {
		data() {
			return {
				visible: false,
				roleId:'',
				checkedKeys:[],
				menuList:[],
				defaultProps:{
					children:'node',
					label:'name'
				},
				selectMenuId:[],
				checkStrictly:false,
				expandAll:true,
				query:{
					selectMenuId:[],
					roleId:'',
				}
			}

		},
		methods: {
			
			ShowDialog(row) {
				
				this.roleId = row.id
				this.visible = false;
				this.init();
				
			},
			
			closeDialog(){
				this.visible = false;
			},
			
			
			init(){
			
				getMenuList().then(response => {
					this.menuList = response.data.extend;
					
					getMenuNameByRoleId({"roleId":this.roleId}).then(response => {
						//this.checkedKeys = response.data.extend;
						
						let checkedKey = response.data.extend;
						this.checkedKeys = checkedKey.filter((item)=>{
							 let menus  =this.menuList.filter(menu=>{
								
								 return menu.name == item
							 })
					
							 if(menus.length<=0){
								 return true;
							 }else{
								 let m = menus[0];
								 if(m.node.length>0){
									 return false;
								 }else{
									 return true
								 }
							 }
						});
						
							
						this.visible = true;
						
					}).catch(error => {
						console.info("失败");
						console.info(error.message);
					});
					
					
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
				
				
			},
			
			handleCheckChange(data,checked,indeterminate){
				this.selectMenuId = this.$refs.menuList.getCheckedKeys().concat(this.$refs.menuList.getHalfCheckedKeys());
			},
			
			onSubmit(){
				this.query.selectMenuId = this.selectMenuId;
				this.query.roleId = this.roleId;
				updateRoleMenu(this.query).then(response => {
					this.$message({
						duration:5000,
						type: 'success',
						message: '角色菜单维护成功！'
					});
					this.visible = false;
				}).catch(error => {
					this.$message({
						duration:5000,						type: 'error',
						message: '角色菜单维护失败！'
					});
					this.visible = false;
				});
			},
			
			
			
			defaultSelectKeys(checkedKeys){
				
			},
			
			handleClose() {
				this.visible = false;
			}
			
			
			
		}
	};
</script>

<style>
</style>
